<template>
  <div class="open-project">
    <div class="header">
      <h2 class="open-title">公开项目</h2>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
              <i class="icon icon-new"></i>
              最新
            </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
              <i class="icon icon-hot"></i>
              最热
            </li>
          </ul>
        </li>
        <li class="main-nav-list nav-right">
          <div class="header-message">
            <p class="count">
              {{ ProjectCollectInfo.userNumber }}
              <span class="character">个用户公开了</span>
              {{ ProjectCollectInfo.projectNumber }}
              <span>个项目</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="navs">
      <div class="navs-detail">
        <h4
          class="navs-detail-tit"
          :class="{'titactive': selectionLabel.id == ''}"
          @click="selectFilterLabel('all')">全部</h4>
        <p class="project-total">共{{totalNum}}个项目</p>
        <ul class="navs-detail-lists">
          <li class="navs-detail-list"
            :class="{'active': selectionLabel.id == item.id}"
            v-for="(item, index) in openFiveLabel"
            :key="index"
            @click="selectFilterLabel(item)"
          >{{item.name}}</li>
        </ul>
        <!-- <h4 class="navs-detail-more">更多分类</h4> -->
        <el-popover
          placement="bottom"
          trigger="click"
          v-model="labelVisible"
          width="800">
          <div class="navs-detail-wrapper">
            <ul class="navs-detail-left">
              <li class="item"
                :class="{ 'active': openAllLabelIndex == index}"
                v-for="(item, index) in openAllLabel"
                :key="index"
                @click="showSeLabel(index)"
              >{{item.name}}</li>
            </ul>
            <ul class="navs-detail-right">
              <li
                class="items"
                v-for="(item, index) in openAllLabelShow"
                :key="index">
                <h4 class="tit">{{item.name}}</h4>
                <ul class="detail-items">
                  <li
                    class="detail-item"
                    :class="{'active': selectionLabel.id == list.id}"
                    v-for="(list, num) in item.childList"
                    :key="num"
                    @click="selectFilterLabel(list)"
                  >{{list.name}}</li>
                </ul>
              </li>
            </ul>
          </div>
          <a
            class="navs-detail-more"
            slot="reference"
            @click="labelVisible = !labelVisible">更多分类</a>
        </el-popover>
      </div>
    </div>
    <div class="content">
      <div v-if="activeTab === 1">
        <load-data v-show="loadState"></load-data>
        <ul class="project-list">
          <li class="item" v-for="(item, index) in Projects" :key="index" @click="toDetail(item)">
            <div class="img-wra">
              <img class="image" :src="item.fileImage">
              <ul class="category">
                <li class="list" v-for="(list, ind) in item.categoryList" :key="ind" v-show="ind < 2">{{list.name}}</li>
              </ul>
            </div>
            <h4 class="name-pro">{{ item.projectName }}</h4>
            <p class="desc">{{ item.profile }}</p>
            <div class="tag-f">
              <ul class="tag-types">
                <li class="types">
                  <i class="icon-type"></i>
                  <span class="txt">{{item.algorithm}}</span>
                </li>
                <li class="types">
                  <i class="icon-type icon-type2"></i>
                  <span class="txt">{{item.language}}</span>
                </li>
              </ul>
              <span class="count">
                <i class="tag-icon"></i>{{ item.copyNumber }}
              </span>
            </div>
          </li>
        </ul>
        <div class="loadmore" v-if="!loadState && hasNextPage">
          <p class="loadmore-box">
            <i v-show="loadingMore" class="el-icon-loading"></i>
            <span v-show="!loadingMore">加载更多...</span>
          </p>
        </div>
        <div class="no-data" v-show="!loadState && Projects.length === 0">
          <img src="@/common/image/nocontent.png">
          <p class="no-data-title">当前列表为空</p>
        </div>
      </div>
      <div v-if="activeTab === 2">
        <load-data v-show="loadState"></load-data>
        <ul class="project-list">
          <li class="item" v-for="(item, index) in Projects" :key="index" @click="toDetail(item)">
            <div class="img-wra">
              <img class="image" :src="item.fileImage">
              <ul class="category">
                <li class="list" v-for="(list, ind) in item.categoryList" :key="ind" v-show="ind < 2">{{list.name}}</li>
              </ul>
            </div>
            <h4 class="name-pro">{{ item.projectName }}</h4>
            <p class="desc">{{ item.profile }}</p>
            <div class="tag-f">
              <ul class="tag-types">
                <li class="types">
                  <i class="icon-type"></i>
                  <span class="txt">{{item.algorithm}}</span>
                </li>
                <li class="types">
                  <i class="icon-type icon-type2"></i>
                  <span class="txt">{{item.language}}</span>
                </li>
              </ul>
              <span class="count">
                <i class="tag-icon"></i>{{ item.copyNumber }}
              </span>
            </div>
          </li>
        </ul>
        <div class="loadmore" v-if="!loadState && hasNextPage">
          <p class="loadmore-box">
            <i v-show="loadingMore" class="el-icon-loading"></i>
            <span v-show="!loadingMore">加载更多...</span>
          </p>
        </div>
        <div class="no-data" v-show="!loadState && Projects.length === 0">
          <img src="@/common/image/nocontent.png">
          <p class="no-data-title">当前列表为空</p>
        </div>
      </div>
    </div>
    <div class="project-mask" v-show="labelVisible" @click="labelVisible=!labelVisible"></div>
  </div>
</template>

<script>
import { getPublicProjectList, getPublicProjectCollectInfo, getTopFiveRelationCategory, getCategoryTreeByType } from '../../api/open_project.js'
import loadData from '@/base/load'
import qs from 'qs'

export default {
  data () {
    return {
      // 标签集合显示
      labelVisible: false,
      // 总页数
      totalPage: 0,
      // 每页条数
      pageSize: 18,
      // 当前页
      pageNumber: 1,
      // 用户数
      user_count: 37,
      // 项目数
      project_count: 52,
      // 热门信息
      Projects: [],
      ProjectCollectInfo: [],
      loadingMore: false,
      bottom: false,
      finished: false,
      hasNextPage: false,
      // 公开项目 5个 标签
      openFiveLabel: [],
      // 标签分类树信息
      openAllLabel: [],
      // 标签树分类显示
      openAllLabelShow: [],
      // 标签树分类 index
      openAllLabelIndex: 0,
      totalNum: '--',
      // 选中标签的筛选条件信息
      selectionLabel: {
        id: '',
        name: ''
      },
      // 数据加载过程
      loadState: true
    }
  },
  computed: {
    activeTab: {
      get: function () {
        if (this.$route.query.active) {
          return Number(this.$route.query.active)
        } else {
          return 1
        }
      }
    }
  },
  watch: {
    bottom: function (bottom) {
      if (this.finished === true) {
        return
      }
      if (bottom) {
        this.loadingMore = true
        this.pageNumber++
        this._getPublicProjectList()
      }
    }
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    if (this.$route.query.active && Number(this.$route.query.active) === 2) {
      this.toggleActive(2)
    } else {
      this.toggleActive(1)
    }
    this._getPublicProjectCollectInfo()
    this._getTopFiveRelationCategory()
    this._getCategoryTreeByType()
  },
  components: {
    loadData
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 最新/最热切换
    toggleActive (val) {
      if (val === 1) {
        this.$router.push({ path: '/openproject', query: { active: 1 } })
      } else {
        this.$router.push({ path: '/openproject', query: { active: 2 } })
      }
      this.hasNextPage = false
      this.Projects = []
      this.pageNumber = 1
      this._getPublicProjectList()
    },
    // 跳转详情
    toDetail (item) {
      this.$router.push({ path: '/openproject/detail', query: { id: item.id } })
    },
    // 处理滚动事件
    handleScroll () {
      let footerHeight = document.getElementById('footer').clientHeight
      let scrollY = window.scrollY
      let visible = document.documentElement.clientHeight
      let pageHeight = document.documentElement.scrollHeight - (footerHeight / 2)
      let bottomOfPage = visible + scrollY >= pageHeight
      this.bottom = bottomOfPage || pageHeight < visible
    },
    // 显示二级标签内容
    showSeLabel (index) {
      this.openAllLabelIndex = index
      this.openAllLabelShow = this.openAllLabel[index].childList
    },
    // 选中过滤标签
    selectFilterLabel (item) {
      let isHas = false
      if (item === 'all') {
        this.selectionLabel.id = ''
        isHas = true
      } else {
        this.selectionLabel.id = item.id
        this.labelVisible = false
      }
      this.Projects.length = 0
      this.pageNumber = 1
      this._getPublicProjectList()
      this.openFiveLabel.forEach(list => {
        if (list.id === item.id) isHas = true
      })
      if (!isHas && this.openFiveLabel.length === 5) {
        this.openFiveLabel.push(item)
      } else if (!isHas && this.openFiveLabel.length === 6) {
        this.openFiveLabel.pop()
        this.openFiveLabel.push(item)
      } else if (isHas) {
        // this.openFiveLabel.pop()
      }
    },
    // 获取公开项目列表
    _getPublicProjectList () {
      this.loadState = true
      let query = `?sortType=${this.activeTab}&pageNumber=${this.pageNumber}&pageSize=${this.pageSize}&categoryId=${this.selectionLabel.id}`
      getPublicProjectList(query).then(res => {
        this.loadState = false
        this.loadingMore = false
        this.finished = true
        if (res.message.code === 0) {
          this.Projects = this.Projects.concat(res.data.list)
          this.hasNextPage = res.data.hasNextPage
          this.totalNum = res.data.total
          if (this.hasNextPage) {
            this.finished = false
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    _getPublicProjectCollectInfo () {
      getPublicProjectCollectInfo().then(res => {
        if (res.message.code === 0) {
          this.ProjectCollectInfo = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取公开项目关联最多的5个标签
    _getTopFiveRelationCategory () {
      const data = qs.stringify({
        type: 1
      })
      getTopFiveRelationCategory(data).then(res => {
        if (res.message.code === 0) {
          this.openFiveLabel = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    _getCategoryTreeByType () {
      getCategoryTreeByType().then(res => {
        if (res.message.code === 0) {
          this.openAllLabel = res.data
          if (res.data.length > 0 && res.data[0].childList) this.openAllLabelShow = res.data[0].childList
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style lang="stylus" rel="stylus">
.open-project
  user-select none
  .header
    // display flex
    // align-items center
    background #f4f7f8
    // height 80px
    .open-title
      margin 0 auto
      width 1162px
      padding 20px 0
      font-size 28px
      font-weight 600
    .nav-list
      width 100%
      height 100%
      position relative
      margin 0 auto
      max-width 1162px
      display flex
      .main-nav-list
        height 100%
        .main-nav-list-container
          display flex
          height 100%
          align-items flex-end
          .nav-item
            padding: 0 15px
            min-width 100px
            height: 50px;
            font-weight 600
            font-size 14px
            display flex
            color #666666
            // justify-content center
            align-items center
            cursor pointer
            position relative
            margin 0
            .icon
              display inline-block
              width 30px
              height 50px
            .icon-new
              background url(../../common/image/icon-project/icon-project-open-new.png) no-repeat center
              background-size 13px 14px
            .icon-hot
              background url(../../common/image/icon-project/icon-project-open-hot.png) no-repeat center
              background-size 13px 14px
            >a
              color #666
              text-decoration none
              cursor pointer
            >a:before
              content ''
              position absolute
              top 0
              right 0
              bottom 0
              left 0
          .link-item
            padding 0 10px
            height 44px
            margin-right 10px
        .nav-item.active
          // font-weight 600
          // color #2d323b
          // box-shadow inset 0 -2px 0 #3780f7
          font-weight: bold;
          color: #2d323b;
          background: #fff;
          box-shadow: 0 14px 0 -10px #f3c922 inset;
          border-radius: 5px 5px 0 0;
    .nav-left
      width 40%
    .nav-right
      opacity 0
      width 60%
      display flex
      align-items center
      justify-content flex-end
      .header-message
        height 40px
        display flex
        align-items center
        float right
        .count
          font-size 13px
        span
          color grey
  .navs
    width 1162px
    // height 100%
    margin 0 auto
    max-width 1162px
    padding: 30px 0 0
    .navs-detail
      height 20px
      font-size 0
      .project-total
        z-index 20
        color #555
        height 30px
        line-height 30px
        display inline-block
        font-size 14px
        float right
      .navs-detail-tit
        display inline-block
        height 20px
        line-height 20px
        font-size 14px
        color #8D9091
        // font-weight 600
        padding-right 10px
        cursor pointer
      .titactive
        color #2196f3
      .navs-detail-lists
        display inline-block
        height 20px
        font-size 0
        vertical-align top
        .navs-detail-list
          display inline-block
          height 20px
          line-height 20px
          padding 0 10px
          font-size 14px
          color #555
          cursor pointer
          vertical-align top
          &:hover
            // background #e2e2e2
            color #2196F3
        .active
          // background #e2e2e2
          color #2196F3
      .navs-detail-more
        position relative
        display inline-block
        height 20px
        line-height 20px
        font-size 14px
        padding-left 12px
        color #555
        cursor pointer
        &:hover
          color #2196f3
        &:after
          content ''
          position absolute
          top 8px
          right -14px
          display block
          width 0
          height 0
          border-top 8px solid #555
          border-left 5px solid transparent
          border-right 5px solid transparent
  .content
    width 1162px
    position relative
    margin 0 auto
    max-width 1162px
    padding 24px 0
    .project-list
      font-size 0
      .item
        display inline-block
        width 270px
        margin-left 27px
        margin-bottom 26px
        background #fff
        border 1px solid #E8E8E8
        border-radius 4px
        overflow hidden
        cursor pointer
        &:hover
          box-shadow 0 0 10px 0 rgba(74, 74, 74, 0.15)
        .img-wra
          position relative
          width 100%
          height 160px
          .image
            display block
            width 100%
            height 100%
          .category
            position absolute
            bottom 12px
            left 14px
            z-index 1
            font-size 0
            .list
              display inline-block
              height 24px
              line-height 24px
              padding 0 8px
              margin-right 10px
              font-size: 12px
              color #FFFFFF
              background rgba(45, 50, 59, 0.35)
              border-radius 4px
        .name-pro
          padding 16px 0
          padding-left 15px
          line-height 22px
          font-size 16px
          color #2D323B
          font-weight 600
        .desc
          height 36px
          padding 0 15px
          line-height 18px
          font-size 14px
          color #8e9091
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          /*! autoprefixer: off */
          -webkit-box-orient vertical
          /* autoprefixer: on */
          -webkit-line-clamp 2
          word-break break-all
          word-wrap break-word
        .tag-f
          padding 21px 15px 23px 15px
          font-size 0
          .tag-types
            display inline-block
            width 80%
            font-size 0
            vertical-align top
            .types
              display inline-block
              height 17px
              padding-right 8px
              font-size 0
              .icon-type
                display inline-block
                width 6px
                height 6px
                margin-top 5px
                margin-right 2px
                background #FFE141
                border-radius 50%
              .icon-type2
                background #4D9DFF
              .txt
                display inline-block
                height 17px
                line-height 17px
                font-size 12px
                color #666666
                vertical-align top
              .types:nth-child(2)
                padding-right 0
          .count
            display inline-block
            width 20%
            height 17px
            line-height 17px
            text-align right
            font-size 12px
            color #666666
            .tag-icon
              display inline-block
              width 12px
              height 17px
              margin-right 6px
              background url(../../common/image/icon-project/icon-copy.png) no-repeat center
              background-size 12px 17px
              vertical-align top
      .item:nth-child(4n+1)
        margin-left 0
  .loadmore
    display flex
    align-items center
    justify-content center
    height 50px
    .loadmore-box
      height 40px
      line-height 40px
      font-size 16px
      width 50%
      display flex
      align-items center
      justify-content center
      background #f5f7fa
      cursor pointer
  .no-data
    width 100%
    height 300px
    padding-top 50px
    background #F4F7F8
    img
      display block
      width 136px
      height 182px
      margin 0 auto
    .no-data-title
      line-height 30px
      font-size 14px
      text-align center
.project-mask
  position fixed
  top 68px
  right 0
  bottom 0
  left 0
  z-index 11
  background transparent
.navs-detail-wrapper
  width 100%
  display flex
  .navs-detail-left
    flex 0 0 120px
    padding-top 10px
    background #f2f2f2
    .item
      height 32px
      line-height 32px
      text-indent 10px
      font-size 16px
      font-weight 600
      cursor pointer
      &:hover
        // background #d2d2d2
        color #2296f3
    .active
      color #2296f3
  .navs-detail-right
    flex 1
    padding-top 10px
    .items
      width 100%
      display flex
      .tit
        flex 0 0 140px
        height 32px
        line-height 32px
        text-align left
        padding-left 10px
        font-size 14px
        font-weight 600
      .detail-items
        flex 1
        font-size 0
        .detail-item
          display inline-block
          padding-left 6px
          padding-right 6px
          height 32px
          line-height 32px
          font-size 14px
          color #333
          cursor pointer
          &:hover
            // background #e2e2e2
            color #2196F3
        .active
          // background #e2e2e2
          color #2196F3
</style>
